<template>
	<el-container>
		<el-header class="common-header">
			<div class="common-header-left">
				<div class="common-header-logo">
					<img alt="logo" src="/assets/images/logo.png">
					<label>tmAdmin</label>
				</div>
			</div>
			<div class="common-header-right">
				<NuxtLink :to="{ path: '/login' }">
					返回登录
				</NuxtLink>
			</div>
		</el-header>
		<el-main>
			<div class="common-container">
				<h2 class="common-title">{{ title }}</h2>
				<div class="common-main el-card">
					<slot></slot>
				</div>
			</div>
		</el-main>
	</el-container>
</template>

<script lang="ts" setup>

defineProps({
	title: {
		type: String,
		default: "",
	},
});

</script>

<style lang="scss" scoped>
.common-header {
	max-width: 1240px;
	margin: 0 auto;
	height: 50px;
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 0;

	.common-header-left {
		display: flex;
		align-items: center;

		.common-header-logo {
			display: flex;
			align-items: center;

			img {
				height: 30px;
				margin-right: 10px;
				vertical-align: bottom;
			}

			label {
				font-size: 20px;
			}
		}
	}

	.common-header-right {
		display: flex;
		align-items: center;

		a {
			font-size: 14px;
			color: var(--el-color-primary);
			cursor: pointer;
		}

		a:hover {
			color: var(--el-color-primary-light-3);
		}
	}

}

.common-container {
	max-width: 1240px;
	margin: 30px auto 30px auto;

	.common-main {
		padding: 20px;

		.el-form {
			width: 500px;
			margin: 30px auto;
		}

		.el-steps .el-step__title {
			font-size: 14px;
		}

		.el-steps .el-step__icon {
			border: 1px solid;
		}

		.link {
			color: var(--el-color-primary);
			cursor: pointer;
		}

		.link:hover {
			color: var(--el-color-primary-light-3);
		}
	}

	.common-title {
		font-size: 26px;
		margin-bottom: 20px;
		font-weight: normal;
	}

}

@media (max-width: 1240px) {
	.common-header {
		padding: 0 20px;
	}
}
</style>
